<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js game</title>

</head>
<script src="./js/game.js"></script>
<body>
<img id="block" src="./img/block.gif" alt="" style="display:none;">
<img id="wall" src="./img/wall.png" alt="" style="display:none;">
<img id="box" src="./img/box.png" alt="" style="display:none;">
<img id="down" src="./img/down.png" alt="" style="display:none;">
<img id="left" src="./img/left.png" alt="" style="display:none;">
<img id="right" src="./img/right.png" alt="" style="display:none;">
<img id="up" src="./img/up.png" alt="" style="display:none;">
<img id="ball" src="./img/ball.png" alt="" style="display:none;">
<canvas id="canvas" width="600" height="450">
    can't see this
</canvas>
<h3 id="tip">no message</h3>
<h3>score ：<span id="score"></span></h3>
<button onclick="re_game()">重新开始</button>
</body>
<script>
    var dWidth = 35,
        dHeight = 35;
    let tip = document.getElementById("tip");
    let score = document.getElementById("score");
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var block = document.getElementById('block');
    var wall = document.getElementById('wall');
    var box = document.getElementById('box');
    var down = document.getElementById('down');
    var left = document.getElementById('left');
    var right = document.getElementById('right');
    var up = document.getElementById('up');
    var ball = document.getElementById('ball');
    window.onload = function () {
        drawMap(mapArr);
    };

</script>
</html>